<template>
  <div class="box">
    <h5>父组件</h5>
    <p>msg:{{ msg }}</p>
    <input type="text" v-model="msg" />
    <p>num:{{ num }}</p>
    <p>arr:{{ arr }}</p>
    <p>user:{{ user }}</p>
    <input type="text" v-model="user.name" />
    <pre class="note">
技术实现：属性绑定，数据拦截
详细描述：
  1. 属性绑定：使用在父组件中定义子组件标签，实现自定义属性绑定，并获取父组件的变量(v-bind)
  2. 数据拦截：在子组件的配置中，通过 props 属性的定义，完成子组件标签绑定的自定义属性的加载和获取
             并在子组件根标签上删除被props拦截的属性记录
特性：
  1. 父向子传递的数据，保留的vue响应式数据特征；父组件修改传递的变量，子组件的props也会更新数据
  2. props的数据为只读数据，不能直接修改; 【props的只读是框架的要求=>单向数据流】
    </pre>
    <ChildComp v-bind:msg="msg" :num="num" :arr="arr" :user="user"></ChildComp>
  </div>
</template>

<script>
import ChildComp from "./ChildComp";
export default {
  components: {
    ChildComp,
  },
  data() {
    return {
      msg: "字符串",
      num: 100,
      arr: [1, 2, 3, 4],
      user: {
        name: "tom",
      },
    };
  },
};
</script>
